<template>
	<view class="main">
		<iconMusic/>
		<view class="block-one">
			<view class="yellow-bar"></view>
			<view class="word-box">
				<view class="word-size word1"><image src="http://rjinbysql.hn-bkt.clouddn.com/static/images/自@2x.png"></image></view>
				<view class="word-size word2"><image src="http://rjinbysql.hn-bkt.clouddn.com/static/images/律@2x.png"></image></view>
				<view class="word-size word3"><image src="http://rjinbysql.hn-bkt.clouddn.com/static/images/达@2x.png"></image></view>
				<view class="word-size word4"><image src="http://rjinbysql.hn-bkt.clouddn.com/static/images/人@2x.png"></image></view>
			</view>
		</view>
		<view class="right-middle"></view>
		<view class="block-two">
			<view class="block-two-bg">
				<view class="computer"></view>
				<view class="right-bottom"></view>
				<view class="comLable-text">
					<text class="yellow">{{ data.name }}</text>
					{{comLable.lineOne.textOne }}<br/>
					{{ comLable.lineOne.textTwo }}
					<text class="yellow">{{ data.win}}</text>
					{{ comLable.lineOne.textThree }}
				</view>
				<text class="comLable-text-two">{{ comLable.lineTwo }}</text>
			</view>
		</view>
			
		
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	import student from '/stateData/student.js'
	const { comLable } = student
	const data = reactive({
		clientY:0,
		name:'张依依',
		win:'自律达人'
	})
</script>

<style lang="scss" scoped>
	@import url(/static/css/style.css);
	.main{
		width: 100%;
		height: 100vh;
		// @include background('http://rjinbysql.hn-bkt.clouddn.com/static/images/bg-comLable.png');
		background: url(http://rjinbysql.hn-bkt.clouddn.com/static/images/bg-comLable.png);
		background-size: 100% 100%;
	}
	
	.word1{
		@include background-word('http://rjinbysql.hn-bkt.clouddn.com/static/images/自b@2x.png');
	}
	.word2{
		@include background-word('http://rjinbysql.hn-bkt.clouddn.com/static/images/律b@2x.png');
	}
	.word3{
		@include background-word('http://rjinbysql.hn-bkt.clouddn.com/static/images/达b@2x.png');
	}
	.word4{
		@include background-word('http://rjinbysql.hn-bkt.clouddn.com/static/images/人b@2x.png');
	}
	
	$width:50%;
	.computer{
		width: $width;
		height: $width/2;
		background:url(https://img.js.design/assets/img/62c63b469284437d488c5814.png) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: -($width*2/5);
	}
	.right-middle{
		width: 150rpx;
		height: 150rpx;
		background:url(https://img.js.design/assets/img/62c63b6924ecdbe42ce77626.png) no-repeat;
		background-size: 100% 100%;
		position:absolute;
		right: 100rpx;
		top: 23%;
	}
	.right-bottom{
		width: 346rpx;
		height: 274rpx;
		background:url(https://img.js.design/assets/img/62c537b2928443d6bd7e15d6.png) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		right: 20rpx;
		bottom: -150rpx;
	}
	
	
	
	
	
</style>
